<template>
  <div class="detail">
    <header>
      <router-link to="/">
        <van-icon color="white" size="35px" name="revoke" />
      </router-link>
      <h3>内容详情</h3>
    </header>
    <section>
      <div class="left">
        <i><img src="../assets/img/上一曲_go-start.png" alt=""></i>
      </div>
      <div class="middle">
        <audio src="https://easyreadfs.nosdn.127.net/5dced1b353c8412980850829a2126220.mp3" 
        id="audio" 
        controls
        ref="audio"
        @canplay="addAudioDur"
        @timeupdate="addAudioCur"
        style="width: 0px; height: 0px; opacity: 0;"></audio>
        <h4>《葵花宝典大作》</h4>
        <h6>作者: 钓人的鱼</h6>
        <img
          src="https://imagev2.xmcdn.com/storages/ed3c-audiofreehighqps/87/53/GMCoOSAKPOfRAAfSyALf0fAR.jpg!op_type=3&columns=144&rows=144">
        <div class="box" @click="playFn">
          <i :class="isPlay === true? 'icon-pause':'icon-play'"></i>
        </div>
      </div>
      <div class="right">
        <i>
          <img src="../assets/img/下一曲_go-end.png">
        </i>
      </div>
    </section>
    <footer>
      <ul ref="ul">
        <li :style="`width:${width}px;`"></li>
      </ul>
      <p>
        <span>{{cur |formatime}}</span>/
        <span>{{dur |formatime}}</span>
      </p>
    </footer>
    <div class="lis">
      <ul>
        <li><img src="../assets/img/赞_thumbs-up.png" alt=""></li>
        <li><img src="../assets/img/文件夹-下载_folder-download.png" alt=""></li>
        <li><img src="../assets/img/音乐菜单_music-list.png" alt=""></li>
        <li><img src="../assets/img/分享2_share-two.png" alt=""></li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import '../assets/css/varible.less';

.detail {
  header {
    width: 100%;
    height: 50px;
    background-color: #FA6205;

    h3 {
      position: fixed;
      top: 13px;
      left: 135px;
      color: white;
      font-family: a;
    }

    a {
      i {
        padding-top: 7px;
        padding-left: 10px;
      }
    }
  }

  section {
    position: fixed;
    display: flex;
    justify-content: space-around;
    top: 50px;
    left: 0;
    height: 616px;
    width: 100%;
    background-color: antiquewhite;

    .left {
      i {
        img {
          width: 40px;
          height: 40px;
          padding-top: 240px;
        }
      }
    }

    .middle {
      position: relative;
      padding-top: 170px;

      h4 {
        position: absolute;
        width: 300px;
        top: 90px;
        left: -5px;
        font-family: a;
      }

      h6 {
        position: absolute;
        width: 300px;
        top: 130px;
        left: 45px;
        font-family: a;
      }

      img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
      }

      .box {
        position: fixed;
        top: 280px;
        padding-left: 60px;
        .icon-play{
          width: 60px;
          height: 60px;
          display: block;
          background-size: cover;
          background-image: url(../assets/img/播放_play.png);
        }
        .icon-pause{
          width: 60px;
          height: 60px;
          display: block;
          background-size: cover;
          background-image: url(../assets/img/暂停_pause.png);
        }
      }
    }

    .right {
      i {
        img {
          width: 40px;
          height: 40px;
          padding-top: 240px;
        }
      }
    }
  }

  footer {

    position: relative;
    position: fixed;
    z-index: 10;
    bottom: 190px;
    width: 100%;

    p {

      position: absolute;
      top: 15px;
      left: 120px;
    }

    ul {
      position: absolute;
      width: 100%;
      height: 5px;
      background-color: white;
      bottom: 0;

      li {
        width: 0px;
        height: 5px;
        background-color: @bgColor;
      }
    }
  }

  .lis {
    ul {
      position: fixed;
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      height: 40px;
      bottom: 100px;

      z-index: 100;

      li {
        display: flex;
        padding-top: 15px;
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      isPlay: false,
      cur:0,
      dur:0,
      width:0,
      totalWidth:0
    }
  },
  mounted() {
        this.$nextTick(() => {
            let ul = this.$refs['ul'];
           
            if (ul) {
                // 获取ul标签的宽度
                this.totalWidth = ul.offsetWidth;
                
            }
        })
    },
  methods: {
    
    playFn() {
      if (this.isPlay) {
        audio.pause();
      }
      else {
        audio.play();
      }
      this.isPlay = !this.isPlay;
    },
    pauseFn() {
      audio.pause(); 
    },
    addAudioDur(){
      let audio =this.$refs['audio'];
        this.dur=audio.duration;
      // console.log("总",audio.duration);
    },
    addAudioCur(){
      let audio =this.$refs['audio'];
        this.cur=audio.currentTime;
      // console.log("当前",audio.currentTime);
      this.width = this.totalWidth * (this.cur / this.dur);
      // console.log(this.totalWidth);
    },
  },
  // 过滤器
  filters: {
        // 工具函数 格式化时间
        formatime(value) {
            // let h = 0;
            let m = 0;
            let s = 0;
            // h = Math.floor(value / 3600);
            m = Math.floor(value % 3600 / 60);
            s = Math.floor(value % 60);
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return `${m}:${s}`;
        }
    },
}
</script>